<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        header{
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: url("./images/u=612478518,3044000348&fm=27&gp=0 (1).jpg") no-repeat;
            background-size: 684px 520px;
            background-position: -92px -10px;
            margin: auto;
            position: relative;
            margin-top:8% ;
        }
        form{
            position: absolute;
            left: 90px;
            top: -30px;
        }
        .dot{
            width: 10px;
            height: 10px;
            background-color: #f3d995;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
        }
        .clock{
            width: 100px;
            height: 2px;
            border: 2px solid blue;
            animation: 216000s spin steps(216000, end) infinite;
            border-radius: 10px;
            position: absolute;
            top:252px;
            left:233px;
            z-index: 1;
            transform-origin: 22px center;
        }
        .minute-hand{
            width: 120px;
            height: 2px;
            border: 2px solid yellow;
            border-radius: 20px;
            animation: spin 3600s steps(3600,end) infinite;
            position: absolute;
            top:252px;
            left: 233px;
            z-index: 2;
            transform-origin: 22px center;
        }
        .second{
            width: 150px;
            height: 2px;
            border: 2px solid #f08f00;
            position: absolute;
            animation: 60s spin steps(60,end) infinite;
            top:252px;
            left: 233px;
            border-radius: 5px;
            z-index: 3;
            transform-origin: 22px center;
        }
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<header>
    <form>
        <input type="button" value="开始计时！" onclick="timedCount()">
        <input type="text" id="txt">
        <input type="button" value="停止计时!" onclick="stopCount()">
    </form>
    <div class="dot"></div>
    <div class="clock"></div>
    <div class="minute-hand"></div>
    <div class="second"></div>
    <script type="text/javascript">
        var c=0
        var t
        function timedCount() {
            document.getElementById("txt").value=c
            c=c+1
            t=setTimeout("timedCount()",1000)
        }
        function stopCount() {
            clearTimeout(t)
        }
    </script>
</header>
</body>
</html>